<template>
  <view class="component">
    <input v-model="_value" :key="inputType" :type="inputType" class="input" placeholder="请输入密码" maxlength="20" />
    <view :class="`icon icon-eye ${eyeClass}`" @click="onClick"></view>
  </view>
</template>

<script setup>
const inputType = ref('password');
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:value']);

const _value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const eyeClass = computed(() => {
  return inputType.value === 'password' ? 'icon-eye--close' : 'icon-eye--open';
})

const onClick = () => {
  console.log('!!!!');
  
  inputType.value = inputType.value === 'password' ? 'text' : 'password';
};

watch(props, () => {
  emit('update:value', props.value);
});

</script>

<style lang="scss" scoped>
.component {
  display: flex;

  .form-item {
    border-bottom: 1px solid #E5E5EB;
  }
  
  .input {
    flex: 1;
  }
  .icon {

    
    // height: 32rpx;
    &-eye {
      display: flex;
      width: 52rpx;
      justify-content: center;
      align-items: center;
      &::before {
        content: '';
        width: 32rpx;
        height: 32rpx;
        background: url('@/static/images/icon/eye-close.png') no-repeat center;
        background-size: contain;
      }
      
      &--close {
        &::before {
          background-image: url('@/static/images/icon/eye-close.png');
        }
      }
      &--open {
        &::before {
          background-image: url('@/static/images/icon/eye-open.png');
        }
      }
    }

  }
}
</style>